<template>
  <div class="chat-list">
    <div class="chat-hd">
      <h1>消息统计</h1>
      <router-link to='/chat/list' class="arrow-wrap">
        <i class="arrow-back"></i>
      </router-link>
    </div>
    <div>
      <canvas id="canvas" width="250px" height="450px"></canvas>
    </div>
  </div>
</template>

<script>
export default {
  name: "messagesCount",
  mounted() {
    this.canvas=document.getElementById("canvas");
    this.ctx=this.canvas.getContext('2d');
  },
  data(){
    return {
      id:this.getCookie('id'),
      data:{},
      length:0,
      maxNum:0,
      ctx:'',
      canvas:''
    }
  },
  created() {
    const date=new Date();
    const dateStart=new Date(date.getTime()-10*24*60*60*1000);
    const dateEnd=new Date(date.getTime()+24*60*60*1000);
    const time_start=dateStart.getFullYear()+'-'+(dateStart.getMonth()+1)+'-'+dateStart.getDate();
    var time_end=dateEnd.getFullYear()+'-'+(dateEnd.getMonth()+1)+'-'+dateEnd.getDate();
    this.$axios.get('/message/count',{params:{'id':this.id,'time_start':time_start,'time_end':time_end,'token':this.getCookie('userToken')}}).then(response=>{
      let res=response.data;
      if(res.state===200){
        this.data=res.data;
        this.chatCanvas()
      }
      else if(res.state===500){
        alert(res.msg);
        this.$router.push('/login')
      }
      else{
        alert(res.msg);
      }
    });
  },
  methods:{
    drawMsg:function (msg){
      var w = this.ctx.canvas.width;
      var h = this.ctx.canvas.height;
      this.ctx.beginPath();
      this.ctx.font = "40px Microsoft YaHei";
      //水平对齐方式
      this.ctx.textAlign = "center";
      //垂直对齐方式
      this.ctx.textBaseline = "middle";
      this.ctx.fillText(msg, w / 2, h / 2);
    },
    drawLine:function (){
      this.ctx.strokeStyle="black";
      this.ctx.beginPath();
      this.ctx.moveTo(250,50);
      this.ctx.lineTo(50,50);
      this.ctx.lineTo(50,450);
      this.ctx.stroke();
    },
    drawIndex:function (){
      this.ctx.font='10px serif';
      var num=400/this.length;
      let i=1;
      for(let val in this.data){
        this.ctx.fillText(this.data[val].date,0,50+num*i++-num/2);
      }
      let j=this.maxNum/4;
      for(let k=1;k<=4;k++){
        this.ctx.fillText(j*k,50*k+40,40);
      }
    },
    drawPillar:function (){
      var num=400/this.length;
      var i=1;
      this.ctx.shadowOffsetX=2;
      this.ctx.shadowOffsetY=2;
      this.ctx.shadowBlur-2;
      this.ctx.shadowColor='rgba(0,0,0,0.5)';
      for(var val in this.data){
        var lineargradient=this.ctx.createLinearGradient(50,50,450,450);
        lineargradient.addColorStop(0,"black");
        lineargradient.addColorStop(1,'blue');
        this.ctx.fillStyle=lineargradient;
        this.ctx.fillRect(50,50+num*i-num+100/this.length,this.data[val].count/this.maxNum*200,num-100/this.length*2);
      }
    },
    chatCanvas:function (){
      if(this.data.length>0){
        this.length=this.data.length;
        for(let index in this.data){
          this.maxNum+=this.data[index].count;
        }
        this.drawLine();
        this.drawIndex();
        this.drawPillar();
      }
      else{
        this.drawMsg('暂无数据')
      }
    }
  }
}
</script>

<style scoped>
  @import "../../static/css/chatMessageCount.css";
</style>
